<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Banners</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 240px;
            overflow: hidden;
            -webkit-tap-highlight-color:rgba(0,0,0,0);
        }
        a:focus, input:focus, p:focus, div:focus{
            -webkit-tap-highlight-color:rgba(0,0,0,0);
            -webkit-user-modify:read-write-plaintext-only;
        }
        #app {
            width: 100%;
            height: 240px;
        }
        .carousel {
            padding: 12px 12px 0 12px;
            width: calc(100% - 24px);
            height: 228px;
        }
        .carousel .el-carousel__container {
            height: 198px;
        }
        .carousel .el-carousel__container .image {
            width: 100%;
            height: 198px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-carousel class="carousel" indicator-position="outside" trigger="click" arrow="always">
        <el-carousel-item v-for="(item, index) in imageList" :key="index">
            <el-image class="image" :src="item.src" fit="cover" @click="imageClickHandle(index)"></el-image>
        </el-carousel-item>
    </el-carousel>
</div>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    eval(fba.getInternalJs());
    window.request = window.request00 || window.request
    new Vue({
        el: '#app',
        data() {
            return {
                imageList: []
            }
        },
        created() {
            const saveTime = localStorage.getItem('time') || 0
            if (new Date().getTime() - parseInt(saveTime) > 1000*60*60*2)
                this.initData()
            else
                this.initImageList()
        },
        methods: {
            initImageList() {
                this.imageList = JSON.parse(localStorage.getItem('imageList'))
            },
            initData() {
                try {
                    const html = request("https://www.gcores.com")
                    const json = fba.parseDomForArray(html, '.slick-list&&.slick-item')
                    const arr = JSON.parse(json)
                    let list = []
                    arr.forEach(item => {
                        let href = fba.parseDomForHtml(item, 'a&&href')
                        let [type, id] = href.split('/').filter(item => item)
                        let image = fba.parseDomForHtml(item, 'img&&src')
                        list.push({
                            src: image,
                            url: 'https://www.gcores.com'+href,
                            type: type,
                            id: id,
                        })
                    })
                    localStorage.setItem('imageList', JSON.stringify(list))
                    localStorage.setItem('time', new Date().getTime().toString())
                    this.imageList = list
                } catch (e) {
                    alert(e)
                }

            },
            imageClickHandle(index) {
                const bannerItem = this.imageList[index]
                switch (bannerItem.type) {
                    case 'albums': bannerItem.url += '#immersiveTheme##noHistory#$$fypage';break
                    default: bannerItem.url += '#immersiveTheme##noHistory#';break
                }

                let findRule = 'js:' + $$$.toString(bannerItem => {
                    bannerItem.url = MY_URL
                    eval(fetch('https://git.tyrantg.com/tyrantgenesis/hikerViewRules/raw/master/COLLECTION/gcores.js'))
                    gcores.x5SubUrlBuild(bannerItem)
                }, bannerItem)

                fba.open(JSON.stringify({
                    title: "",
                    url: bannerItem.url,
                    findRule: findRule,
                    /*extra: {
                        newWindow: true,
                        windowId: "机核GCORES·轮播"
                    }*/
                }))
            },
        },
    });
</script>
</body>
</html>